<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用市场 - StudyAtAI</title>
    <!-- Bootstrap 5 CSS -->
    <link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="{{ url_for('static', filename='vendor/fontawesome/css/all.min.css') }}" rel="stylesheet">
    <!-- 导航栏样式 -->
    <link href="{{ url_for('static', filename='css/navbar.css') }}" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <!-- 背景动画 -->
    <div class="geometric-background">
        <div class="geometric-shape shape1"></div>
        <div class="geometric-shape shape2"></div>
        <div class="geometric-shape shape3"></div>
        <div class="geometric-shape shape4"></div>
        <div class="geometric-shape shape5"></div>
    </div>

    <!-- 导航栏 -->
    {% include 'navbar.html' %}

    <!-- 主要内容 -->
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="text-white mb-0">应用市场</h4>
            <div class="d-flex gap-2">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索应用...">
                    <button class="btn btn-primary">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 左侧分类导航 -->
            <div class="col-md-3 mb-4">
                <div class="card text-white">
                    <div class="card-header">
                        <h5 class="card-title mb-0">应用分类</h5>
                    </div>
                    <div class="list-group list-group-flush">
                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center active">
                            <i class="fas fa-graduation-cap me-2"></i>
                            学科学习
                            <span class="badge bg-primary ms-auto">12</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                            <i class="fas fa-brain me-2"></i>
                            智能辅导
                            <span class="badge bg-primary ms-auto">8</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                            <i class="fas fa-tasks me-2"></i>
                            作业批改
                            <span class="badge bg-primary ms-auto">6</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                            <i class="fas fa-chart-line me-2"></i>
                            学习分析
                            <span class="badge bg-primary ms-auto">4</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                            <i class="fas fa-tools me-2"></i>
                            学习工具
                            <span class="badge bg-primary ms-auto">10</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 右侧应用列表 -->
            <div class="col-md-9">
                <!-- 热门推荐 -->
                <div class="mb-4">
                    <h5 class="text-white mb-3">热门推荐</h5>
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" data-section="featured">
                    </div>
                </div>

                <!-- 最新上架 -->
                <div>
                    <h5 class="text-white mb-3">最新上架</h5>
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" data-section="latest">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
    <!-- Bootstrap 5 JS -->
    <script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <!-- 自定义脚本 -->
    <script src="{{ url_for('static', filename='js/market.js') }}"></script>
</body>
</html> 